<template>
	<view class="noticeLayout">
		<view class="title">
			<view class="tag">
				<uni-tag text="置顶" type="error" size="small" inverted="true"></uni-tag>
			</view>
			<view class="font">常见问题，自行排查</view>
		</view>
		<view class="info">
			<view class="author">柒柒</view>
			<view class="date">
				<uni-dateformat date="2020/10/20 20:20:20" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>
		<view class="content">
			<rich-text
				nodes="<h2>壁纸是否可以免费下载使用</h2><p>柒柒壁纸小程序/H5,内的所有图片均可免费下载,但图片版权属于上传者或者图片来源作者,下载后仅可自己欣赏或个人使用,不能作为商业途径</p>"></rich-text>
		</view>
		<view class="footer">
			<view class="text">阅读</view>
			<view class="readNum">486</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.noticeLayout {
		.title {
			display: flex;
			margin: 50rpx 30rpx;
			align-items: center;

			.font {
				font-size: 46rpx;
				margin-left: 20rpx;
			}

		}

		.info {
			display: flex;
			align-items: center;
			margin: 0 30rpx;

			&>view {
				color: $text-font-color-3;
				font-size: 28rpx;

			}

			.author {
				margin-right: 20rpx;
			}
		}

		.content {
			margin: 50rpx 30rpx;

			rich-text {
				p {
					padding-top: 10rpx;
					line-height: 1.5em;
				}

			}

		}

		.footer {
			display: flex;
			align-items: center;
			margin: 0 30rpx;

			&>view {
				color: $text-font-color-3;
				font-size: 28rpx;
			}

			.text {
				padding-right: 10rpx;
			}
		}
	}
</style>